<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS Timing</title>
    <script>
        // 实际上在使用过程中 尤其是移动应用中 app 退到后台对于Js 的timer 的影响还是挺大
        function timedMsg(){
            var t=setTimeout("alert('5 秒！')",5000)
        }
        
        // 倒计时的文本
        function timeText(){

            // 只会执行一次 倒计时的方法 
            var t1 = setTimeout(() => {
                document.getElementById("txt").value = '2 秒'
            }, 2000);
            var t2 = setTimeout(() => {
                document.getElementById("txt").value = '4 秒'
            }, 4000);
            var t3 = setTimeout(() => {
                document.getElementById("txt").value = '6 秒'
            }, 6000);
        }
        
        var c = 0;
        var t;
        // 这是一个持续的 计时器 如果有多个input txt 会依次从上至下优先选择上面那个如果 id 是相同的值
        function timeCount(){
            document.getElementById('txt2').value = c
            c = c + 1;
            t = setTimeout(() => {
                timeCount();  // 循环计算时间
            }, 1000);
        }
        
        // 带有开始和暂停功能的定时器
        var c2 = 0
        var t2;
        function startTimer(){
            document.getElementById('txt3').value=c2
            c2=c2+1
            t2=setTimeout(() => {
                startTimer()
            }, 1000);
        }

        function stopTimer(){

            c2 = 0
            setTimeout(() => {
                document.getElementById('txt3').value=0
            }, 0);  // 立即执行这个timer 相当于
            clearTimeout(t2)
        }
        
        // 开始 闹钟计算时间 
        function startAlarmClock(){
            // 我们使用 timer 来制作一个时钟
            var today = new Date()
            var h = today.getHours()
            var m = today.getMinutes()
            var s = today.getSeconds()

            m = checkTime(m)
            s = checkTime(s)
            // h = checkTime(h)
            document.getElementById("txt4").value = h + ":" + m + ":" + s
            var t5 = setTimeout(() => {
                startAlarmClock()
            }, 500);
        }
        
        // 将 1 等 返回成 01
        function checkTime(i){
            if (i < 10){
                i = "0" + i
            }
            return i
        }


    </script>
</head>
<body>
    <input type="button" value="显示定时的警告框" onClick = "timedMsg()"></input>
    <p>请点击上面的按钮。警告框会在 5 秒后显示。</p>

    <input type="button" value="显示计时的文本" onclick="timeText()"></input>
    <input type="text" id="txt" />
    <p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>

    <input type="button" value="开始计时！" onClick="timeCount()">
    <input type="text" id="txt2">
    <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>

    <input type="button" value="开始计时！" onClick="startTimer()">
    <input type="text" id="txt3">
    <input type="button" value="停止计时！" onClick="stopTimer()">
    <p>请点击上面的按钮。 开始 或者 停止一个定时器 </p>
    
    <input type="button" value="开始闹钟计时！" onClick="startAlarmClock()">
    <input type="text" id="txt4">
    <p>请点击上面的按钮。 开始 一个 闹钟样式的 计算时间 </p>
</body>
</html>